<!DOCTYPE html>
<html>
<head>
	<title>Example 3</title>
	<meta charset="utf-8" />
	<style>
		div {
			background-size: cover;
			float: left;
			padding: 0 50px 50px;
		}
		.block1 {
			background-image: url(http://farm4.static.flickr.com/3219/2431886567_c92821aede_o.jpg);
			display: none;
		}
		.block2 {
			background-image: url(http://farm1.static.flickr.com/37/85684217_526797a103_o.jpg);
		}
		.block3 {
			width: 100px;
			height: 100px;
			background-image: url(http://farm5.static.flickr.com/4080/4906820567_63fb82fa85_b.jpg);
		}
		.block4 {
			width: 100px;
			height: 100px;
			background-image: url(http://farm3.static.flickr.com/2652/4112396574_8e9f7d81a1_b.jpg);
		}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="../src/jquery.preload.js"></script>
	<script>

		$(function(){

			$('.block1').preload(function(){
				$(this).show();
			});

		});

	</script>
</head>
<body>

	<h1><a href="http://github.com/htmlhero/jQuery.preload">jQuery.preload</a> example 3</h1>

	<div class="block1">
		<div class="block2">
			<div class="block3"></div>
			<div class="block4"></div>
		</div>
	</div>

</body>
</html>